<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/common.css">
    <script type="text/javascript" src="/js/assets/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="/js/layer/layer.js"></script>

    <style>
        #lottery {
            width: 100%;
            margin: 0px auto;
            border: 4px solid #ba1809;
            background: url(/img/xinyonghu.png);
            background-size: cover;
        }

        #lottery table td {
            position: relative;
            width: 33.3%;
            height: 33.3%;
            text-align: center;
            color: #333;
            font-index: -999
        }

        #lottery table td img {
            display: block;
            width: 75px;
            height: 75px;
        }

        #lottery table td a {
            width: 75px;
            height: 75px;
            display: block;
            text-decoration: none;
            /*background:url(/img/che.png) no-repeat top center;*/
        }

        #lottery table td a:hover {
            /*background-image:url(/img/che.png);*/
        }

        #lottery table td.active .mask {
            display: block;
        }

        .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            border: 5px solid #ff6600;
            display: none;
        }

        .frequency {
            font-size: 11px;
            color: #010100;
            margin-left: 44%;
        }

        .roll {
            width: 65%;
            height: 68px;
            margin: 50px 20%;
            line-height: 68px;
            text-align: center;
            font-size: 22px;
            color: #010100;
        }

        .rebox {
            width: 100%;
            background: url("/img/zhuce.png");
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 2;
            background-size: cover;
        }

        .phoneCord {
            border: none;
            background: none;
            font-size: 13px;
            color: #b0b0b0;
            float: left;
            outline: none;
        }

        .obtain {
            background: #e14538;
            float: right;
            font-size: 6px;
            color: #fdf8e4;
            text-align: center;
            line-height: 17px;
            border: none;
            border-radius: 5px;
        }

        .obtain2 {

            float: left;
            font-size: 17px;
            color: #fdf8e4;
            text-align: center;
            line-height: 32px;
        }

        .verificationCode {
            font-size: 13px;
            color: #b0b0b0;
            border: none;
            background: none;
            outline: none;
        }

        .pictureCode {
            border: none;
            background: none;
            font-size: 13px;
            color: #b0b0b0;
            float: left;
            outline: none;
        }

        .confirm {
            width: 96%;
            height: 24px;
            margin-left: 4%;
            margin-top: 80px;
        }

        .display {
            display: none;
        }

        .qitian {
            width: 100%;
            background: url("/img/needlogin.png");
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 2;
            background-size: cover;
        }

        .announce {
            width: 290px;
            margin-left: 40px;
            float: left;
            top: 0;
        }
    </style>
</head>
<body class="keBody">
<div class="rebox display" id="rebox">
    <div class="close"></div>
    <div class="whole">
        <input type="text" class="verificationCode" placeholder="手机号"/>
        <input type="text" class="pictureCode" placeholder="图形验证码"/>

        <div class="obtain2">
            <img src="/sys/ImageServlet" id="validImg" style="cursor:pointer;width: 60px"/>
        </div>
        <input type="text" class="phoneCord" placeholder="验证码"/>
        <input type="button" class="obtain" value="获取验证码">

        <div class="confirm"></div>
    </div>
</div>
<div class="qitian display" id="qitian">
    <div class="close2 display" id="qitianclose"></div>
</div>
<!--效果html开始-->
<div id="lottery">
    <input type="hidden" id="prize" value="7">

    <div class="frequency" id="frequency">
        您有<span>1</span>次抽奖机会
    </div>
    <div style="overflow: hidden;height: 50px;width: 63%;position: relative ;margin-left: 20%;margin-top: 0" id="newse">
        <ul id="record" style="position:absolute;top:0;left:0;width:10000px;height:50px;">

        </ul>
        <a href="/notice?1?4" class="more_announce"></a>
    </div>


    <table id="tablew" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td class="lottery-unit lottery-unit-0">
                <div class="mask"></div>
            </td>
            <td class="lottery-unit lottery-unit-1">
                <div class="mask"></div>
            </td>
            <td class="lottery-unit lottery-unit-2">
                <div class="mask"></div>
            </td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-7">
                <div class="mask"></div>
            </td>
            <td><a href="#"></a></td>
            <td class="lottery-unit lottery-unit-3">
                <div class="mask"></div>
            </td>
        </tr>
        <tr>
            <td class="lottery-unit lottery-unit-6">
                <div class="mask"></div>
            </td>
            <td class="lottery-unit lottery-unit-5">
                <div class="mask"></div>
            </td>
            <td class="lottery-unit lottery-unit-4">
                <div class="mask"></div>
            </td>
        </tr>
    </table>
    <div id="ruleSee"></div>
</div>

<script type="text/javascript">

    /** 文字滚动效果 **/
    $.fn.textScroll = function () {
        var speed = 80, t = $(this), c = $(this).children(), l = $(this).find('li');
        var w = t.width(), w_c = 0;
        l.each(function () {
            w_c += $(this).innerWidth();
        });
        var tm = (w + w_c) * 1000 / speed;
        c.css("left", w);
        function run() {
            c.animate({left: -w_c}, tm, "linear", function () {
                c.css("left", w);
                run();
            });
        }

        run();
    }
    $("#newse").textScroll();


    var w = document.body.clientWidth;
    var bgPic = document.querySelector('#lottery');
    bgPic.style.height = 1334 * w / 750 + 'px';

    var bgPic2 = document.querySelector('#rebox');
    bgPic2.style.height = 1334 * w / 750 + 'px';

    //    配置

    $('.content').css('margin-top', 55 / 750 * w + 'px');
    $('.content').css('width', 320 / 750 * w + 'px');
    $('.content').css('height', 46 / 750 * w + 'px');

    $('#newse').css('line-height',128/750*w+'px');
    $('#newse').css('width',490/750*w+'px');
    $('#newse').css('height',100/750*w+'px');

    $('#frequency').css('margin-top', 400 / 750 * w + 'px');
    $('#frequency').css('width', 220 / 750 * w + 'px');
    $('#frequency').css('height', 30 / 750 * w + 'px');

    $('#tablew').css('width',460/750*w+'px');
    $('#tablew').css('height',460/750*w+'px');
    $('#tablew').css('margin-top',25/750*w+'px');
    $('#tablew').css('margin-left',152/750*w+'px');

    $('#fenxiang').css('width', 192 / 750 * w + 'px');
    $('#fenxiang').css('height', 50 / 750 * w + 'px');
    $('#fenxiang').css('margin-top', 130 / 750 * w + 'px');
    $('#fenxiang').css('margin-left', 147 / 750 * w + 'px');

    $('#ruleSee').css('width', 192 / 750 * w + 'px')
    $('#ruleSee').css('height', 50 / 750 * w + 'px')
    $('#ruleSee').css('margin-top', 130 / 750 * w + 'px')
    $('#ruleSee').css('margin-left', 300 / 750 * w + 'px')
    //    配置
    $('.whole').css('margin-top', 480 / 750 * w + 'px');
    $('.whole').css('margin-left', 185 / 750 * w + 'px');
    $('.whole').css('width', 384 / 750 * w + 'px');
    $('.whole').css('height', 280 / 750 * w + 'px');

    $('.verificationCode').css('width', 366 / 750 * w + 'px');
    $('.verificationCode').css('height', 42 / 750 * w + 'px');
    $('.verificationCode').css('margin-left', 20 / 750 * w + 'px');
    $('.verificationCode').css('margin-top', 25 / 750 * w + 'px');

    $('.pictureCode').css('width', 220 / 750 * w + 'px');
    $('.pictureCode').css('height', 44 / 750 * w + 'px');
    $('.pictureCode').css('margin-top', 25 / 750 * w + 'px');
    $('.pictureCode').css('margin-left', 20 / 750 * w + 'px');

    $('.obtain2').css('width', 100 / 750 * w + 'px');
    $('.obtain2').css('height', 30 / 750 * w + 'px');
    $('.obtain2').css('margin-top', 30 / 750 * w + 'px');
    $('.obtain2').css('margin-left', 20 / 750 * w + 'px');

    $('.close').css('width', 38 / 750 * w + 'px');
    $('.close').css('height', 38 / 750 * w + 'px');
    $('.close').css('margin-top', 132 / 750 * w + 'px');
    $('.close').css('margin-left', 615 / 750 * w + 'px');

    $('.phoneCord').css('width', 224 / 750 * w + 'px');
    $('.phoneCord').css('height', 38 / 750 * w + 'px');
    $('.phoneCord').css('margin-top', 22 / 750 * w + 'px');
    $('.phoneCord').css('margin-left', 22 / 750 * w + 'px');

    $('.obtain').css('width', 120 / 750 * w + 'px');
    $('.obtain').css('height', 30 / 750 * w + 'px');
    $('.obtain').css('margin-top', 28 / 750 * w + 'px');

//    中奖纪录
    $.ajax({
        type: "POST",
        url: "/lottery/lotteryList",
        data: {},
        dataType: "json",
        success: function (data) {
            console.log(data);
            var record=$('#record').html();
            var html='';
            for(var i=0;i<10;i++){
                html+="<li id='' style='float:left;'>"+
                "<p class='content'>"+data[i].mobile+'抽中'+data[i].goodsName+"</p></li>"
            }
            $('#record').html(html)
        }
    });
    //公告轮播

    var $this = $("#news");
    var scrollTimer;
    $this.hover(function () {
        clearInterval(scrollTimer);
    }, function () {
        scrollTimer = setInterval(function () {
            scrollNews($this);
        }, 2000);
    }).trigger("mouseleave");

    function scrollNews(obj) {
        var $self = obj.find("ul");
        var lineWidth = $self.find("li:first").width();
        $self.find("li:first").animate({
            "marginLeft": -lineWidth + "px"
        }, 600, function () {
            $self.css({
                marginLeft: 0
            }).find("li:first").appendTo($self);
        })
    }


    $('.close').bind('click', function () {
        $('#rebox').addClass('display')
    })
    $('#qitianclose').bind('click', function () {
        $('#qitian').addClass('display')
    })
    var w = document.body.clientWidth;
    var rebox = document.querySelector('#rebox');
    rebox.style.height = 1334 * w / 750 + 'px';
    
    var lottery = {
        index: -1,    //当前转动到哪个位置，起点位置
        count: 8,    //总共有多少个位置
        timer: 0,    //setTimeout的ID，用clearTimeout清除
        speed: 20,    //初始转动速度
        times: 0,    //转动次数
        cycle: 50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1,    //中奖位置
        init: function (id) {
            if ($("#" + id).find(".lottery-unit").length > 0) {
                $lottery = $("#" + id);
                $units = $lottery.find(".lottery-unit");
                this.obj = $lottery;
                this.count = $units.length;
                $lottery.find(".lottery-unit-" + this.index).addClass("active");
            }
            ;
        },
        roll: function () {
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            $(lottery).find(".lottery-unit-" + index).removeClass("active");
            index += 1;
            if (index > count - 1) {
                index = 0;
            }
            ;
            $(lottery).find(".lottery-unit-" + index).addClass("active");
            this.index = index;
            return false;
        },
        stop: function (index) {
            this.prize = index;
            return false;
        }
    };

    function roll() {
        lottery.times += 1;
        lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
        if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
            clearTimeout(lottery.timer);
            lottery.prize = -1;
            lottery.times = 0;
            click = false;
            setTimeout(function () {
                $('#qitian').removeClass('display')
            }, 1000)
        } else {
            if (lottery.times < lottery.cycle) {
                lottery.speed -= 10;
            } else if (lottery.times == lottery.cycle) {
                lottery.prize = $('#prize').val();
            } else {
                if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                    lottery.speed += 110;
                } else {
                    lottery.speed += 20;
                }
            }
            if (lottery.speed < 40) {
                lottery.speed = 40;
            }
            ;
//          console.log(lottery.times + '^^^^^^' + lottery.speed + '^^^^^^^' + lottery.prize);
            lottery.timer = setTimeout(roll, lottery.speed);//循环调用
        }
        return false;
    }

    var click = false;

    window.onload = function () {
        lottery.init('lottery');
        $("#lottery a").click(function () {
            $('#qitian').show();
        });
        $('#qitian').bind('click',function(){
        	$('#qitian').hide();
        });
        $('#ruleSee').bind('click', function () {
	        window.location.href = '/html/rules3.html'
	    });
    };
</script>
<!--效果html结束-->

</body>
</html>